<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/more.css">
</head>
<body>
    <div class="container">
        <div class="more">
            <div class="search">
                <div class="input">
                    <div class="searchBtn"></div>
                </div>
            </div>
            <div class="mores">
                <div class="moreLeft">
                    <ul>
                        <li class="active">精选推荐</li>
                        <li>女装</li>
                        <li>男装</li>
                        <li>男女内衣</li>
                        <li>女鞋</li>
                        <li>男鞋</li>
                        <li>箱包皮具</li>
                        <li>手表配饰</li>
                        <li>护肤彩妆</li>
                        <li>个人护理</li>
                        <li>母婴鞋服</li>
                        <li>运动户外</li>
                        <li>手机数码</li>
                        <li>家用电器</li>
                        <li>家居家纺</li>
                        <li>生活超市</li>
                        <li>国际</li>
                        <li>家具家装</li>
                    </ul>
                </div>
                <div class="moreRight">
                    <div class="top">
                        <img src="https://a.vpimg3.com/upload/goadmin/2021/10/13/21/163409519499510815.jpg" alt="">
                    </div>
                    <div class="recommend">
                        <div class="title">
                            <span>大牌推荐</span>
                        </div>
                        <div class="list">
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/10/08/55/163368429218510991.gif" alt="">
                                <span>潮流计划</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/10/15/115/163426296831810711_120x120_85.png" alt="">
                                <span>夹克风潮</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/10/08/40/163368433744310959_120x120_85.png" alt="">
                                <span>型格卫衣</span>
                            </div>
                        </div>
                    </div>
                    <div class="recommend">
                        <div class="title">
                            <span>热销分类</span>
                            <span>热销榜</span>
                        </div>
                        <div class="list">
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/09/28/53/163279424177610400_120x120_85.png" alt="">
                                <span>秋季上新</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/33/161649612051710428_120x120_85.png" alt="">
                                <span>夹克</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/77/161649614363810037_120x120_85.png" alt="">
                                <span>卫衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/65/160016759320010566_120x120_85.png" alt="">
                                <span>休闲裤</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/4/161649616467910186_120x120_85.png" alt="">
                                <span>长袖T恤</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/114/160016757096110598_120x120_85.png" alt="">
                                <span>羽绒服</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/87/160016760475710666_120x120_85.png" alt="">
                                <span>牛仔裤</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/11/30/102/160671737524410810_120x120_85.png" alt="">
                                <span>毛衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/151/160016765931410235_120x120_85.png" alt="">
                                <span>皮衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/17/161649622309110151_120x120_85.png" alt="">
                                <span>外套</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/17/160016762697310945_120x120_85.png" alt="">
                                <span>西装</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/91/161649613396110543_120x120_85.png" alt="">
                                <span>衬衫</span>
                            </div>
                        </div>
                    </div>
                    <div class="recommend">
                        <div class="title">
                            <span>内搭</span>
                            <span>热销榜</span>
                        </div>
                        <div class="list">
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/01/13/163/157890978192310888_120x120_85.png" alt="">
                                <span>薄款卫衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/09/15/69/160016807120810895_120x120_85.png" alt="">
                                <span>套头卫衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/199/161649628640610681_120x120_85.png" alt="">
                                <span>连帽卫衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/8/161649626133710189_120x120_85.png" alt="">
                                <span>长袖T恤</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/129/161649624874110117_120x120_85.png" alt="">
                                <span>长袖衬衫</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/54/161649633991810317_120x120_85.png" alt="">
                                <span>针织衫</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/194/161649630973110483_120x120_85.png" alt="">
                                <span>羊绒/羊毛衫</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/106/161649629987210434_120x120_85.png" alt="">
                                <span>毛衣</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2020/01/13/29/157890966135010841_120x120_85.png" alt="">
                                <span>短袖T恤</span>
                            </div>
                            <div class="alist">
                                <img src="https://a.vpimg3.com/upload/goadmin/2021/03/23/188/161649632666310054_120x120_85.png" alt="">
                                <span>Polo衫</span>
                            </div>
                        </div>
                    </div>
                    <div class="chanel">进入男装频道 ></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 在iphone6 375宽度中  html是以20px作为基本单位
    (function () {
        function w() {
            var all = document.documentElement;  // 获取html元素
            var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
            console.log(123, test)
            if (test > 750) {
                test = 750;
            }
            rem = test / 18.75;
            console.log(rem)
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();

</script>
</html>